<template>
  <nut-popup v-model:visible="show" position="bottom">
    <nut-date-picker
      v-model="time"
      type="datetime"
      :min-date="min"
      :max-date="max"
      :three-dimensional="false"
      :filter="filter"
      @confirm="confirm"
      :formatter="formatter"
      @cancel="closeFirm"
    ></nut-date-picker>
  </nut-popup>
</template>
<script lang="js" setup>
import { ref, onMounted, defineProps, defineEmits } from "vue";

const show = ref(false);
const time = ref();
const min = new Date();

const max = new Date(min.getFullYear(), new Date().getMonth()+1, 31, 23, 50);
const formatter = (type, option) => {
  switch (type) {
    case 'year':
      option.text += '年';
      break;
    case 'month':
      option.text += '月';
      break;
    case 'day':
      option.text += '日';
      break;
    case 'hour':
      option.text += '时';
      break;
    case 'minute':
      option.text += '分';
      break;
    default:
      option.text += '';
  }
  return option;
};
const filter = (type, options) => {
  if (type === "minute") {
    return options.filter((option) => Number(option.value) % 10 === 0);
  }
  return options;
};

function confirm({ selectedValue }) {
  console.log(selectedValue);
}
function closeFirm() {
  time.value = "";
  show.value = false;
}
function openShow() {
  show.value = true;
}
onMounted(() => {});
defineExpose({ openShow });
</script>
<style lang="scss" scoped></style>
